<template>
  <el-dialog title="分配权限" :visible="show" @update:visible="$emit('update:show',$event)" @open="handleOpen">
    <el-tree ref="tree" :default-checked-keys="selectedList" node-key="id" :data="permissionList" :props="{label:'name'}" default-expand-all show-checkbox />
    <template #footer>
      <el-button type="primary" @click="save">确定</el-button>
      <el-button @click="$emit('update:show',false)">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getPermissionList } from '@/api/permisson'
import { getRole, assignPerm } from '@/api/setting'
import { list2Tree } from '@/utils'
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      permissionList: [],
      selectedList: []
    }
  },
  // watch: {
  //   async id() {
  //     console.log(this.id)
  //     const res1 = await getRole(this.id)
  //     this.selectedList = res1.permIds
  //   }
  // },
  created() {
    console.log('created执行了')
  },

  methods: {
    async handleOpen() {
      console.log(1234)
      const res = await getPermissionList()
      this.permissionList = list2Tree(res, '0')
      const res1 = await getRole(this.id)
      this.selectedList = res1.permIds
    },
    async save() {
      // console.log(this.$refs.tree.getCheckedKeys())
      await assignPerm({ id: this.id, permIds: this.$refs.tree.getCheckedKeys() })
      this.$message.success('分配成功')
      this.$emit('update:show', false)
    }
  }
}
</script>

<style scoped lang='scss'></style>
